<template>
    <div class="component-container">
        <div class="left-content">
            <div class="grid-title">用户列表</div>
            <el-table :data="table1.data" style="width: 100%; height: 486px;">
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="nickname" label="姓名" />
                <el-table-column fixed="right" label="操作" width="80">
                    <template #default="scope">
                        <el-button @click="handleIn(scope.row)" size="small">移入</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="table1.pagination.currentPage" :page-sizes="table1.pagination.pageSizes" :page-size="table1.pagination.pageSize" layout="total, prev, pager, next" :total="table1.pagination.total">
            </el-pagination>
        </div>
        <div class="right-content">
            <div class="grid-title">当前角色用户</div>
            <el-table :data="table2.data" style="width: 100%; height: 486px">
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="nickname" label="姓名" />
                <el-table-column fixed="right" label="操作" width="80">
                    <template #default="scope">
                        <el-button @click="handleOut(scope.row)" size="small">移出</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="table2.pagination.currentPage" :page-sizes="table2.pagination.pageSizes" :page-size="table2.pagination.pageSize" layout="total, prev, pager, next" :total="table2.pagination.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'

export default {
    props: {
        roleId: String
    },
    emits: [],
    setup(props, ctx) {
        const state = reactive({
            table1: {
                data: [],
                pagination: {
                    currentPage: 1,
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
            table2: {
                data: [],
                pagination: {
                    currentPage: 1,
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
        })

        const loadData1 = () => {
            let params = {
                username: '',
                page: state.table1.pagination.currentPage,
                pageSize: state.table1.pagination.pageSize
            }
            http.fetchForm({
                url: '/sys/user/queryGrid',
                data: params
            }).then((res) => {
                state.table1.data = res.data.grid;
                state.table1.pagination.total = res.data.total;
            });
        }

        const loadData2 = () => {
            let params = {
                roleId: props.roleId,
                page: state.table2.pagination.currentPage,
                pageSize: state.table2.pagination.pageSize
            }
            http.fetchForm({
                url: '/sys/role/queryRoleUserGrid',
                data: params
            }).then((res) => {
                state.table2.data = res.data.grid;
                state.table2.pagination.total = res.data.total;
            });
        }

        const handleSizeChange1 = (val) => {
            state.table1.pagination.pageSize = val;
            loadData1();
        };

        const handleCurrentChange1 = (val) => {
            state.table1.pagination.currentPage = val;
            loadData1();
        };

        const handleSizeChange2 = (val) => {
            state.table2.pagination.pageSize = val;
            loadData2();
        };

        const handleCurrentChange2 = (val) => {
            state.table2.pagination.currentPage = val;
            loadData2();
        };

        const handleIn = (row) => {
            let params = {
                id: '',
                userId: row.id,
                roleId: props.roleId
            };
            http.fetchJson({
                url: '/sys/role/addRoleUser',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: "移入成功",
                    type: 'success'
                });
                loadData2();
            });
        }

        const handleOut = (row) => {
            http.fetchForm({
                url: '/sys/role/removeRoleUser',
                method: 'post',
                data: {
                    id: row.id
                }
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: "移除成功",
                    type: 'success'
                });
                loadData2();
            });
        }

        onMounted(() => {
            loadData1();
            loadData2();
        });

        return {
            ...toRefs(state),
            loadData1,
            loadData2,
            handleSizeChange1,
            handleCurrentChange1,
            handleSizeChange2,
            handleCurrentChange2,
            handleIn,
            handleOut
        }
    }
}
</script>
<style scoped>
.component-container {
    width: 100%;
    display: flex;
}

.left-content,
.right-content {
    width: 50%;
    height: 100%;
}

.left-content {
    border-right: 1px solid #eee;
}

.grid-title {
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    background: #f8f8f9;
    color: #464c5b;
    /*border-bottom: 1px solid #eee;*/
}

:deep(.el-pagination) {
    padding: 10px !important;
}
</style>